<template>
  <view class="page">
    <u-gap :height="5"></u-gap>
    <uni-datetime-picker :border="false" v-model="dateRange" type="daterange" @change="timeSelect" />

    <u-gap :height="30"></u-gap>
    <view v-for="(item, index) in essayList" :key="index" class="timeline-item">
      <view class="dot-status"></view>
      <view class="essay-item">
        <view class="essay-item-in">
          <view class="title">
            <u--text :lines="1" :text="item.createTime"></u--text>
          </view>
          <view class="bottom" @click="handleAction(1,item)">
            <view class="content">
              <u-parse :content="item.content"></u-parse>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="page-footer">
      <u-empty mode="list" :marginTop="140" v-if="totalNum == 0"></u-empty>
      <uni-pagination v-else show-icon="true" :total="totalNum" :pageSize="queryParams.pageSize"
        :current="queryParams.pageNum" @change="getData"></uni-pagination>
      <view class="text-grey padding text-center"> 共 {{ totalNum }}条数据 </view>
    </view>
  </view>

</template>

<script>
  import {
    getMyArticleList,
    delArticle
  } from '@/api/system/article.js'
  export default {
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          status: '1',
          sort: 'createTime',
          sortType: 'desc',
          articleType: 1
        },
        dateRange: [],
        totalNum: 0,
        essayList: [],
      };
    },
    onShow() {
      this.getList()
    },
    methods: {
      getList() {
        uni.showLoading({
          title: 'loading...'
        });
        this.essayList = []
        getMyArticleList(this.queryParams).then(res => {
          const {
            code,
            data
          } = res

          this.totalNum = data.totalNum

          if (this.queryParams.pageNum <= 1) {
            this.essayList = data.result;
          } else {
            this.essayList = [...this.essayList, ...data.result];
          }
        })
      },
      handleEdit(e) {
        this.$tab.navigateTo('/pages/essay/details?cid=' + e.cid)
      },
      handleDelete(e) {
        this.$modal.confirm('你确定要删除吗?').then(() => {
          delArticle(e.cid).then(res => {
            this.$modal.msgSuccess("删除成功")
            this.getList()
          })
        })
      },
      getData(e) {
        this.queryParams.pageNum = e.current
        this.getList()
      },
      onPullDownRefresh() {
        uni.stopPullDownRefresh()
        this.getList()
      },
      timeSelect(e) {
        this.addDateRange(this.queryParams, e, 'Time');
        this.getList()
      },
      handleAction(type, item) {
        var that = this
        uni.showActionSheet({
          itemList: ['编辑', '详情', '删除'],
          success: function(res) {
            switch (res.tapIndex) {
              case 0:
                uni.navigateTo({
                  url: '/pages/essay/publish?cid=' + item.cid
                })
                break;
              case 1:
                that.$tab.navigateTo('/pages/essay/details?cid=' + item.cid)
                break;
              case 2:
                that.handleDelete(item)
                break;
              default:
                break;
            }
          },
          fail: function(res) {
            console.log(res.errMsg);
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 随笔
  .page {
    margin: 0 0 20px 0;
  }

  .essay-item,
  .timeline-item {
    position: relative;
  }

  .timeline-item {
    margin: 0 10px;
    // padding-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
  }

  .timeline-item::before {
    background-color: #ccc;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 1px;
  }

  .dot-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin-left: -4px;
  }

  .essay-item {
    width: 100%;
    // margin: 0upx 30rpx;
    // border-bottom-width: 1px;
    // border-left: 2px solid #ccc;
  }

  .essay-item-in {
    margin: 0 20rpx;
    background-color: #fff;
    border-radius: 8px;

    .title {
      font-size: 32rpx;
      color: #303133;
      line-height: 46rpx;
      padding-left: 20rpx;
    }

    .content {
      padding: 20rpx 20rpx;
      font-size: 26rpx;
      color: #888;
      // margin-left: 20rpx;
      height: 110px;
      overflow: hidden;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .author {
    display: flex;
    margin-left: -4px;
    font-size: 26rpx;
    color: #aaa;

    .time {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .page-footer {
    margin: 20px;
  }
</style>
